<template>
  <div class="app-container">
    <el-container style="height: 100%; border: 1px solid #eee">
      <div class="consumer">
        <div class="user">
          <el-avatar style="margin-right: 12px" shape="square" :size="70" :src="userInfo.himg"></el-avatar>
          <div class="detail">
            <div>
              昵称：
              <el-tag>{{ userInfo.nickname }}</el-tag>
            </div>
            <div>
              姓名：
              <el-tag>{{ userInfo.name }}</el-tag>
            </div>
            <div>
              手机：
              <el-tag>{{ userInfo.mobile }}</el-tag>
            </div>
          </div>
        </div>
        <el-form ref="userform" :model="userform" label-width="130px">
          <!-- <el-form-item label="测试一：" v-if="showTest">
            <el-input v-model="test.testOne" placeholder="请输入测试一"></el-input>
          </el-form-item>
          <el-form-item label="测试二：" v-if="showTest">
            <el-input v-model="test.testTwo" placeholder="请输入测试二"></el-input>
          </el-form-item>
          <el-form-item v-if="showTest">
            <el-button type="primary" @click="setTest">确认修改</el-button>
          </el-form-item>-->

          <el-form-item label="用户状态：">
            <el-radio-group v-model="userform.userStatus" size="mini">
              <el-radio-button label="1">正常用户</el-radio-button>
              <el-radio-button label="2">禁止访问</el-radio-button>
              <el-radio-button label="3">限制消费</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="抽盒开关：">
            <el-radio-group v-model="userform.is_effect" size="mini">
              <el-radio-button label="1">开启</el-radio-button>
              <el-radio-button label="0">关闭</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="能量球开关：">
            <el-radio-group v-model="userform.is_open_nlq" size="mini">
              <el-radio-button label="1">开启</el-radio-button>
              <el-radio-button label="0">关闭</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="每月积分商城购买次数：">
            <el-input-number v-model="userform.goods_buy_time" placeholder="次数"></el-input-number>
          </el-form-item>
          <el-form-item label="限制金额：">
            <el-input
              v-model="userform.money"
              placeholder="请输入金额"
              :disabled="userform.userStatus != 3"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="setStatus">确认修改状态</el-button>
          </el-form-item>

          <el-form-item label="赠送：">
            <el-button type="primary" @click="drawer = true">赠送</el-button>
          </el-form-item>
        </el-form>
        <!-- 导航选择 -->
        <el-aside width="100%" style="background-color: rgb(238, 241, 246)">
          <el-menu @select="selectItem" :default-active="defaultActive">
            <el-menu-item index="12">
              <i class="el-icon-watermelon"></i>
              <span>能量球</span>
            </el-menu-item>
            <el-menu-item index="13">
              <i class="el-icon-watermelon"></i>
              <span>能量值</span>
            </el-menu-item>
            <el-menu-item index="1">
              <i class="el-icon-watermelon"></i>
              <span>优惠券</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-apple"></i>
              <span>余额记录</span>
            </el-menu-item>
            <el-menu-item index="101">
              <i class="el-icon-user"></i>
              <span>下级用户</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-orange"></i>
              <span>积分记录</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-cherry"></i>
              <span>赏袋记录</span>
            </el-menu-item>
            <el-menu-item index="5">
              <i class="el-icon-pear"></i>
              <span>天选之人记录</span>
            </el-menu-item>
            <el-menu-item index="6">
              <i class="el-icon-pear"></i>
              <span>交易记录</span>
            </el-menu-item>
            <el-menu-item index="7">
              <i class="el-icon-pear"></i>
              <span>发货记录</span>
            </el-menu-item>
            <el-menu-item index="8">
              <i class="el-icon-pear"></i>
              <span>合成记录</span>
            </el-menu-item>
            <el-menu-item index="9">
              <i class="el-icon-pear"></i>
              <span>用户盈亏</span>
            </el-menu-item>
            <el-menu-item index="10">
              <i class="el-icon-pear"></i>
              <span>用户充值</span>
            </el-menu-item>
            <el-menu-item index="11">
              <i class="el-icon-pear"></i>
              <span>审批列表</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
      </div>

      <el-container>
        <el-main>
          <!-- 能量球 -->
          <Blind ref="blind" :user_id="userId" v-show="defaultActive == 12"></Blind>
          <!-- 能量值 -->
          <BlindNum ref="blindnum" :user_id="userId" v-show="defaultActive == 13"></BlindNum>
          <!-- 优惠券 -->
          <coupon-list ref="coupon" :user_id="userId" v-show="defaultActive == 1"></coupon-list>
          <!-- 用户余额 -->
          <balance-list ref="balance" :user_id="userId" v-show="defaultActive == 2"></balance-list>
          <!-- 下级用户及充值记录 -->
          <lower-users ref="lowerUsers" :user_id="userId" v-show="defaultActive == 101"></lower-users>
          <!-- 用户积分 -->
          <integral-list ref="integral" :user_id="userId" v-show="defaultActive == 3"></integral-list>
          <!-- 用户赏袋 -->
          <bag-list ref="bag" :user_id="userId" v-show="defaultActive == 4"></bag-list>
          <!-- 天选之人抽奖记录 -->
          <tx-list ref="txbox" :user_id="userId" v-show="defaultActive == 5"></tx-list>
          <!-- 交易记录 -->
          <blind-order ref="blindorder" :user_id="userId" v-show="defaultActive == 6"></blind-order>
          <!-- 发货单记录 -->
          <invoice ref="invoice" :user_id="userId" v-show="defaultActive == 7"></invoice>
          <!-- 合成记录 -->
          <merge ref="merge" :user_id="userId" v-show="defaultActive == 8"></merge>
          <!-- 用户盈亏 -->
          <profit-and-loss ref="profitandloss" :user_id="userId" v-show="defaultActive == 9"></profit-and-loss>
          <!-- 用户充值 -->
          <recharge ref="recharge" :user_id="userId" v-show="defaultActive == 10"></recharge>
          <!-- 用户审批 -->
          <review-list ref="review" :user_id="userInfo.mobile" v-show="defaultActive == 11"></review-list>
        </el-main>
      </el-container>
    </el-container>

    <!-- 抽屉 -->
    <el-drawer
      title="添加赠送"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <el-form style="margin-left: 20px" ref="form" :model="form" label-width="90px">
        <el-form-item label="赠送类型">
          <el-radio-group v-model="form.type">
            <el-radio label="2">余额</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="赠送数量" v-if="form.type == 2 || form.type == 3">
          <el-input v-model="form.data" placeholder="请填写赠送数量"></el-input>
        </el-form-item>
        <el-form-item label="加减类型" v-if="form.type == 2 || form.type == 3">
          <el-select v-model="form.in_type" placeholder="请选择加或减">
            <el-option label="加" value="1"></el-option>
            <el-option label="减" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="充值类型" v-if="form.type == 2">
          <el-select v-model="form.give_type" placeholder="请选择充值类型">
            <el-option label="充值" value="1"></el-option>
            <el-option label="赠送" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="onCancle">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import CouponList from './component/coupon.vue'
import BalanceList from './component/balance.vue'
import LowerUsers from './component/lowerUsers.vue' //下级用户
import IntegralList from './component/integral.vue'
import BagList from './component/bag.vue'
import TxList from './component/txBox.vue'
import BlindOrder from './component/blindOrder.vue'
import Invoice from './component/invoice.vue'
import Merge from './component/merge.vue'
import ProfitAndLoss from './component/profitandloss.vue'
import Recharge from './component/userRecharge.vue'
import ReviewList from './component/reviewList.vue'
import Blind from './component/blind.vue'
import BlindNum from './component/blindNum.vue'

import store from '@/store/index'

import { addGive } from '@/api/marketing'

import {
  userInfo,
  userStatus,
  setUserTest,
  setSystemConfig,
  systemConfig
} from '@/api/consumer'

export default {
  name: 'ConsumerOprate',
  components: {
    CouponList,
    BalanceList,
    IntegralList,
    BagList,
    TxList,
    BlindOrder,
    Invoice,
    Merge,
    ProfitAndLoss,
    Recharge,
    ReviewList,
    LowerUsers,
    Blind,
    BlindNum
  },
  data() {
    return {
      userId: '',
      userInfo: '',
      userform: {
        userStatus: '',
        money: '',
        is_effect: '',
        is_open_nlq: ''
      },
      test: {
        testOne: '',
        testTwo: ''
      },
      showTest: false,
      defaultActive: '12',
      drawer: false,
      direction: 'rtl',
      form: {
        user_id: '',
        type: '2',
        data: '',
        in_type: '',
        give_type: ''
      }
    }
  },
  mounted() {
    if (store.getters.roles.includes('account')) {
      this.showTest = true
    } else {
      this.showTest = false
    }
    this.userId = this.$route.query.id
    this.form.user_id = this.userId
    this.getUserInfo()
  },
  activated() {
    this.userId = this.$route.query.id
    // this.defaultActive = '1'
    // this.$refs.coupon.getUserCoupon()
    this.defaultActive = '12'

    setTimeout(() => {
      this.$refs.blind.init()
    }, 2000)
    this.getUserInfo()
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      const res = await userInfo({ id: this.userId })
      const res2 = await systemConfig({ id: this.userId }) // 能量球配置 当月商城购买配置
      console.log(res)
      this.userInfo = res.data
      this.userform.userStatus = res.data.status
      this.userform.money = res.data.max_money
      this.userform.is_effect = res.data.is_effect
      this.userform.is_open_nlq = res2.data.is_open_nlq || 0
      this.userform.goods_buy_time = res2.data.goods_buy_time
      if (res.data.is_test == 0) {
        this.test.testOne = 0
        this.test.testTwo = 0
      } else {
        this.test.testOne = res.data.test1
        this.test.testTwo = res.data.test2
      }
    },
    selectItem(index) {
      console.log(index)
      this.defaultActive = index
      if (this.defaultActive == 1) {
        this.$refs.coupon.getUserCoupon()
      } else if (this.defaultActive == 2) {
        this.$refs.balance.getUserBalance()
      } else if (this.defaultActive == 101) {
        this.$refs.lowerUsers.getlowerUsers()
      } else if (this.defaultActive == 3) {
        this.$refs.integral.getUserIntegral()
      } else if (this.defaultActive == 4) {
        this.$refs.bag.getUserBoutique()
      } else if (this.defaultActive == 5) {
        this.$refs.txbox.getUserTX()
      } else if (this.defaultActive == 6) {
        this.$refs.blindorder.getList()
      } else if (this.defaultActive == 7) {
        this.$refs.invoice.getList()
      } else if (this.defaultActive == 8) {
        this.$refs.merge.getUserMerge()
      } else if (this.defaultActive == 9) {
        this.$refs.profitandloss.getUserProfitandloss()
      } else if (this.defaultActive == 10) {
        this.$refs.recharge.getRechargeList()
      } else if (this.defaultActive == 11) {
        this.$refs.review.getList()
      } else if (this.defaultActive == 12) {
        this.$refs.blind.init()
      } else if (this.defaultActive == 13) {
        this.$refs.blindnum.init()
      }
    },
    async setTest() {
      const res = await setUserTest({
        user_id: this.userId,
        test1: this.test.testOne,
        test2: this.test.testTwo
      })
      console.log(res)
      if (res.st == 1) {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      } else {
        this.$message.error(res.msg)
      }
    },
    // 修改状态
    async setStatus() {
      if (this.userform.userStatus == 3 && !this.userform.money) {
        alert('请输入限制金额')
        return
      }
      const res = await userStatus({
        user_id: this.userId,
        status: this.userform.userStatus,
        max_money: this.userform.money,
        is_effect: this.userform.is_effect
      })
      const res2 = await setSystemConfig({
        user_id: this.userId,
        is_open_nlq: this.userform.is_open_nlq,
        goods_buy_time: this.userform.goods_buy_time
      })
      console.log(res)
      if (res.st == 1) {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      } else {
        this.$message.error(res.msg)
      }
      if (res2.st == 1) {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      } else {
        this.$message.error(res2.msg)
      }
    },
    // 获取用户余额列表
    async getUserBalance() {
      // const res = await userBalance()
    },
    // 获取用户积分列表
    async getUserIntegral() {
      // const res = await userIntegral()
    },
    async onSubmit() {
      if (!this.form.type) {
        this.$message.error('请选择赠送类型！')
        return
      } else if (this.form.type == '2' || this.form.type == '3') {
        if (!this.form.data) {
          this.$message.error('请输入赠送数量！')
          return
        } else if (!this.form.in_type) {
          this.$message.error('请选择加还是减！')
          return
        } else if (!this.form.give_type && this.form.type != '3') {
          this.$message.error('请选择充值类型！')
          return
        }
      }
      // user_id: this.userId,

      const newform = Object.assign({}, this.form, {
        user_id: this.userId
      })

      const res = await addGive(newform)
      if (res.st == 1) {
        this.$message({
          message: '赠送成功',
          type: 'success'
        })
        this.drawer = false
      } else {
        console.log(res)
        this.$message.error('赠送失败！')
      }
    },
    onCancle() {
      this.form = {
        type: '',
        data: '',
        in_type: '',
        give_type: ''
      }
      this.drawer = false
    },

    // 抽屉
    handleClose(done) {
      this.form = {
        type: '',
        data: '',
        in_type: '',
        give_type: ''
      }
      done()
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 20px;
}
.search {
  display: flex;
  align-items: center;
}
// ::v-deep .el-input {
//   width: 238px;
//   display: block;
//   position: static !important;
// }
// ::v-deep .el-input--medium .el-input__inner {
//   width: 238px;
// }

::v-deep .el-form-item__label {
  padding: 0 30px 0 0;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-container {
  border: none !important;
}
aside {
  padding: 0;
}
.el-aside {
  height: 100%;
  background-color: #fff !important;
  color: #333;
}

.el-menu {
  border: none;
}
.el-menu-item {
  padding: 0 !important;
  font-size: 16px;
  i {
    margin-right: 20px;
    font-size: 25px;
  }
}
.consumer {
  display: flex;
  flex-direction: column;
  width: 400px;
  .user {
    display: flex;
    // justify-content: space-evenly;
    align-items: center;
    margin-bottom: 20px;
  }
}
.label {
  width: 100px;
}
</style>
